<template>
  <div class="article-list">
    <share-shade ref="shareShades"></share-shade>
    <van-list v-model="vanList.loading"
          :finished="vanList.finished"
          :error.sync="vanList.error"
          error-text="请求失败，点击重新加载"
          finished-text="没有更多了"
          :immediate-check="false"
          @load="getCommunityListPost">
      <div class="article-list-wrap">
        <div class="list-item" v-for="props in imgsArr" :key="props">
          <div>
            <div class="img" @click="handleWatchEvent(props)">
              <img :src="props.src" alt="">
            </div>
            <div class="avatar-info">
              <div class="title">{{props.title}}</div>
              <div class="avatar">
                <img class="img" :src="props.head_img || defaultAvatar" alt="" @click="toUserList(props.community_id)">
                <span class="name">{{props.nick_name || '匿名'}}</span>
                <div class="forward fr">
                <div class="icon">
                  <img class="icon_like" @click.stop="handleLike(2, props)" v-if="props.is_praise == 1" src="https://img.wifenxiao.com/h5-wfx/images/like.png">
                  <img class="icon_like" @click.stop="handleLike(1, props)" v-else src="https://img.wifenxiao.com/h5-wfx/images/gray-like.png">
                </div>
                <span>{{Number(props.praise_points_num) > 100 ? '99+' : props.praise_points_num}}</span>
              </div>
                <div class="forward fr">
                  <div class="icon">
                    <wx-share
                      :videoItem="props"
                      shareType="articleDetail"
                      @shareSuccess="shareSuccess"
                      @openShareShade="openShareShade"></wx-share>
                  </div>
                  <span>{{Number(props.forwarding_number) > 100 ? '99+' : props.forwarding_number}}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </van-list>
    <div class="noData" v-if="!listLoading && imgsArr.length <= 0">
      <div class="icon">
        <img src="https://img.wifenxiao.com/h5-wfx/images/item/question/noData.png" alt="">
      </div>
      <div class="txt">暂无数据</div>
    </div>
    <Posting :postingInfoChild="postingInfo" @reloadArticleList="init('search')"></Posting>
    <!-- 授权弹出框 -->
    <small-login ref="smalllogin"></small-login>
  </div>
</template>

<script>
  /**
	 * @Author: yqe@360shop.cn
	 * @Date: 2019-09-26 18:48:09
	 * @Last Modified by: yqe@360shop.cn
	 * @Last Modified time: 2019-09-26 18:48:09
	 */
  // import axios from 'axios'
  import Vue from 'vue'
  import Store from '@/utils/store'
  import { getCommunityList } from '@/api/community/article'
  import { shareCountAdd, communityPraise } from '@/api/community/video'
  import small from '@/smallapp/small'
  import SmallLogin from '@/components/SmallLogin/smallLogin'
  import wxShare from '@/components/wxShare'
  import shareShade from '@/components/wxShare/shareShade'
  import Posting from '@/components/Posting'
  export default Vue.extend({
    name: 'index',
    data() {
      return {
        defaultAvatar: 'https://img.wifenxiao.com/h5-wfx/images/community/default_avatar.png',
        defaultArticle: 'https://img.wifenxiao.com/h5-wfx/images/community/noArticle.png',
        imgsArr: [],
        listLoading: true,
        detailId: '',
        postData: {
          size: 10,
          page: 1,
          label_id: 0,
          community_user_id: 0, // 个人的列表参数
          community_user_reply_id: 0
        },
        postingInfo: {
          commentType: 1
        },
        vanList: {
          loading: false,
          error: false,
          finished: false
        }
      }
    },
    components: {
      wxShare,
      shareShade,
      Posting,
      SmallLogin
    },
    methods: {
      // 点赞和取消点赞
      handleLike(type, val) {
        if (!small.checkLogin()) {
          this.$refs.smalllogin.openSmallLoginPop()
          return false
        }
        this.$loadingWrap.show()
        this.detailId = val.community_id
        communityPraise({
          id: this.detailId,
          type: 1,
          add: type
        }).then(res => {
          this.$loadingWrap.close()
          if (res.status == 1) {
            const imgsArr = this.imgsArr
            imgsArr.forEach(item => {
              if (item.community_id === this.detailId) {
                if (type == 1) {
                  item.is_praise = 1
                  item.praise_points_num = Number(item.praise_points_num) + 1
                } else if (type == 2) {
                  item.is_praise = 0
                  item.praise_points_num = Number(item.praise_points_num) - 1
                }
              }
            })
            this.imgsArr = imgsArr
          } else {
            this.$Error(res.msg)
            // msg: "你已取消过啦！"
            if (res.errorCode == 'Q00001') {
            const imgsArr = this.imgsArr
              imgsArr.forEach(item => {
                if (item.community_id === this.detailId) {
                  item.is_praise = 0
                  item.praise_points_num = Number(item.praise_points_num) - 1
                }
              })
              this.imgsArr = imgsArr
            }
            // msg: "你已点赞过啦！"
            if (res.errorCode == 'Z00001') {
              const imgsArr = this.imgsArr
              imgsArr.forEach(item => {
                if (item.community_id === this.detailId) {
                  item.is_praise = 1
                  item.praise_points_num = Number(item.praise_points_num) + 1
                }
              })
              this.imgsArr = imgsArr
            }
          }
        })
      },
      toUserList(community_id) {
        this.postData.community_user_id = community_id
        this.$emit('changeCommunityUserId', community_id)
        this.imgsArr = []
        this.postData.page = 1
        this.getCommunityListPost(false)
      },
      /**
       * 分享成功之后抛出的函数
       * param.type: 1点赞数，2转发量，3播放量
       */
      shareSuccess() {
        this.$refs.shareShades.showShade = false
        shareCountAdd({ id: this.detailId, type: 2 }).then(res => {
        })
      },
      /**
       * 分享按钮组件抛出的
       * 打开分享遮罩
       */
      openShareShade() {
        this.$refs.shareShades.showShade = true
        setTimeout(() => {
          this.$refs.shareShades.showShade = false
        }, 10000)
      },
      /**
       * 获取文章列表
       */
      init(type) {
        this.postData.community_user_id = this.$parent.community_user_id || 0
        this.postData.community_user_reply_id = this.$parent.community_user_reply_id || 0
        this.postData.page = 1
        this.vanList.finished = false
        this.imgsArr = []
        this.$loadingWrap.show()
        setTimeout(() => {
          this.$loadingWrap.close()
        }, 50000)
        this.getCommunityListPost(type)
      },
      getCommunityListPost(type) {
        this.postData.community_user_id = this.$parent.community_user_id || 0
        this.postData.community_user_reply_id = this.$parent.community_user_reply_id || 0
        const params = Object.assign({ sid: this.$route.query.sid }, this.postData, true)
        getCommunityList(params).then(res => {
          this.$loadingWrap.close()
          if (res.status === 1) {
            const resData = res.data
            this.$emit('articleBgImg', res.article_bg_img ? res.article_bg_img : '')
            resData.forEach(item => {
              item.src = item.file_path ? item.file_path : this.defaultArticle
            })
            if (type === 'search') {
              this.imgsArr = resData
              this.postData.page++
            } else {
              if (resData.length > 0) {
                this.imgsArr.push(...resData)
                this.postData.page++
              } else {
                this.vanList.finished = true
              }
            }
          }
        })
      },
      /**
       * 列表卡片点击事件
       */
      handleWatchEvent(value) {
        this.$JumpName(this, 'article-detail', { detailId: value.community_id })
      }
    },
    created() {
      // this.init()
    },
    mounted() {
      this.init()
      window.addEventListener('reachbottom', () => {
        this.getCommunityListPost()
      })
    }
  })
</script>

<style lang="scss">
  @import "../../../../styles/mixin";
  @import "../../../../styles/variables";
  .article-list{
    width: calc(100% - 10px);
    //height: calc(100vh - 210px);
    margin: 0 auto;
    padding-top: 10px;
    &-wrap{
      font-size: 0;
      padding: 14px;
      .list-item{
        display: inline-block;
        width: 49%;
        box-shadow: 0 2px 12px rgba(169, 169, 169, 0.3) !important;
        background: #fff;
        border-radius: 15px!important;
        overflow: hidden;
        margin-right: 2%;
        vertical-align: top;
        margin-bottom: 20px;
        &:nth-child(2n) {
          margin-right: 0;
        }
        .img{
          width: 100%;
          height: 300px;
          overflow: hidden;
          img{
            width: 100%;
          }
        }
      }
    }
    .avatar-info{
      padding: 20px;
      .title{
        font-size: 30px;
        color: #333333;
        @include showEllipsis;
      }
      .avatar{
        margin-top: 15px;
        font-size: 0;
        .img{
          @include alignTop;
          width: 40px;
          height: 40px;
          border-radius: 50%;
        }
        .name{
          @include showEllipsis;
          @include alignTop;
          width: 120px;
          margin-top: 7px;
          margin-left: 10px;
          font-size: 26px;
          color: #666;
        }
        .forward{
          margin-top:2px;
          font-size: 24px;
          color: #666;
          .icon_like {
            width: 36px;
            height: 36px;
            // margin-left: 20px;
          }
          span{
            @include alignTop;
            line-height: 42px;
          }
          .icon{
            margin-right: 6px;
            color: #d1d1d1;
            font-size: 36px;
            display: inline-block;
            &.active{
              color: $mainColor;
            }
          }
        }
      }
    }

  }
</style>
